<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px; height: 100px; background-color: red; position: absolute;left: 0px; top: 0;"></div>

    <script type="text/javascript">
    
        // 封装实用性兼容性方法，获取元素样式，CSS属性值
        function getStyle(elem, prop) {
            if(window.getComputedStyle) {
                return window.getComputedStyle(elem, null)[prop];
            }else{
                return elem.currentStyle[prop];
            }
        }
        
        var div = document.getElementsByTagName('div')[0];
        var speed = 2;
        var timer = setInterval(function(){

            // speed = speed + 2;
            speed += speed / 7;
            div.style.left = parseFloat(getStyle(div, 'left')) + speed + 'px';
  
            if(parseInt(div.style.left) > 500){
                clearInterval(timer);
            }

        }, 100);
    
    
    
    
    </script>

</body>
</html>